iT邦幫忙

2024 iThome 鐵人賽

DAY 5
1

https://ithelp.ithome.com.tw/upload/images/20240919/201520735T1vIxUEQE.png

前言

在第四章的最後一部分,我們介紹了 Grafana 視覺化工具的種類,以及每個種類適合的資料格式。雖然這只是一個簡單的介紹,但已經可以初步了解 Grafana 圖表主要是為了顯示與時間相關的數據。此外,隨著時間的推移和開發者需求的變化,Grafana 也新增了如狀態、Canvas 以及各種小工具等功能。為了能夠更清晰地展示這些工具的價值,本章節將更深入地介紹這些豐富多樣的視覺化工具,並探討它們的具體用途和應用場景。

一、Time series

https://ithelp.ithome.com.tw/upload/images/20240919/20152073S6vHOwgotn.png

時間序列視覺化 是 Grafana 中用來展示隨時間變化的資料點的首選工具。這類視覺化方式能夠將資料序列以折線圖、散點圖或長條圖的形式呈現,並且具有高度的靈活性。無論是監控系統效能指標、追蹤應用程式的日誌變化,還是分析歷史資料趨勢,時間序列視覺化都能夠以直觀的圖表形式。

資料格式

Time series 所支援的資料格式即為時間序列資料,例如一張表中記錄著每個時間點的當下天氣溫度,並以 1 小時做為間隔。每一筆資料皆為一個特定時間代表對應著一個單獨測量值。

時間
09:00 24℃
10:00 26℃
11:00 27℃

以上的表格範例中,雖然可以清楚地了解每個時間點對應的溫度值,但僅靠文字列表,很難一眼看出趨勢。如果時間範圍增加,資料量達到成千上萬筆時,會讓人眼花撩亂。如果將這樣的資料直接呈交給老闆,恐怕他在打開一秒鐘後就會立刻關閉檔案,並丟進回收桶。因此,通過視覺化的方式(如下圖)呈現這些資料,可以讓這龐大的資料集更有條理地顯示出其特徵和趨勢,讓資料變得一目了然。

https://ithelp.ithome.com.tw/upload/images/20240919/2015207367Cs95fPZP.png

特點

時間序列資料的特點在於它們是按時間順序排列的測量序列,並且具有以下幾個共同屬性:

  • 定時附加新資料:新的資料點會隨時間的推移而定時添加。
  • 資料不易變更:一旦添加測量值,這些資料通常不會再被更新,例如昨天的溫度記錄不會改變。
  • 強大的分析能力:幫助使用者分析任意時間點的系統狀態,提供關於過去系統行為的深入洞察。
  • 趨勢預測:可以揭示資料的趨勢,進而預測未來的發展,並識別週期性或季節性的模式。

使用情境

不僅限於溫度資料的展示,還包括其他日常的資料監控和分析需求:

  • 系統效能監控:如 CPU 和記憶體的使用情況,讓運維人員即時了解系統狀態。
  • 金融市場分析:例如股市指數的變動,可以幫助投資者追蹤市場走勢,並基於歷史資料做分析。
  • 資源管理:例如磁碟空間的使用情況,可以預測資源耗盡的時間,並提前採取行動。
  • 負載預測與調整:識別系統負載的週期性峰值,可以在預計的高峰期前增加資源以應對需求。

二、Bar chart

https://ithelp.ithome.com.tw/upload/images/20240919/20152073OhjZgUi6QH.png

長條圖是一個適合進行分類並比較資料的圖表,可以分為不同類別的數值比較或是多個數值欄位的資料比較。並且可以透過橫向或直向長條型的方式呈現資料。

資料格式

Bar Chart 要求資料來源為一個資料框架(data frame),必須包含至少一個作為 X 或 Y 軸分類的字串欄位,以及一個或多個數值欄位。如果資料框架中包含多個數值欄位,Bar Chart 會自動生成分組條形圖,可以更方便地進行比較。

使用情境

  1. 同時比較多個時間序列的最終值或最大值
  2. 分析不同伺服器或應用程序的資源使用情況,例如:各伺服器的 CPU、記憶體及磁碟使用情況。

三、Histogram

https://ithelp.ithome.com.tw/upload/images/20240919/201520737HNp5ooikR.png

Histogram 是用來計算數值分佈並以條形圖形式展示的圖表。Histogram 的條形圖每個條形代表一個「桶」(bucket), X 軸則表示數值範圍(一個 Bucket),例如 10~10.4,為連續值;而 Y 軸及條形的高度表示落在每個桶中的數值計數(例如 120 筆資料)。

資料格式

支援時間序列資料和具有一個或多個數值欄位的表格資料。

使用情境

  • 可視化和分析資料分佈:檢視某些數值在特定時間範圍內的出現頻率,了解資料的分佈情況。
  • 識別資料中的異常值:快速識別資料中的異常值,這些異常值可能代表不尋常的現象或資料錯誤。

四、Candlestick

https://ithelp.ithome.com.tw/upload/images/20240919/201520734YPi9atd78.png

專為價格變動的所展現的圖表工具,例如股票價格等資產的波動情況。這種視覺化包括「開盤-最高-最低-收盤」(Open-High-Low-Close, OHLC) 模式,並支援基於時間序列資料的額外維度。Candlestick 建立在時間序列視覺化的基礎上。每個蠟燭圖(Candlestick)用一個矩形表示,稱為「蠟燭體」(candlestick body),蠟燭體代表在某一時間段內的開盤價和收盤價。綠色蠟燭表示價格上漲,紅色蠟燭表示價格下跌。蠟燭體外伸出的線條稱為「燭芯」或「影線」(wicks or shadows),代表該時間段內的最高價和最低價。

資料格式

由於主要展示資產的價格變動,所以支援的資料格式包含:

  • 時間戳記:每次價格變動發生的時間。
  • 開盤價:時間段開始時的資產價格。
  • 收盤價:時間段結束時的資產價格。
  • 最高價:資產在該時間段內達到的最高價格。
  • 最低價:資產在該時間段內達到的最低價格。

五、Gauge

https://ithelp.ithome.com.tw/upload/images/20240919/20152073QsweAGzkRT.png

https://ithelp.ithome.com.tw/upload/images/20240919/20152073exRkP74Ud5.png

前面列了許多項都是以時間序列資料或是多數據比較的圖表,Gauge 則是一種顯示單一數值的視覺化工具,適合用來展示單一指標的當前狀態或表,或是根據資料集、欄或列來重複顯示多個儀表。可以有半月型的 Gauge 或是長條型的 Bar Gauge,並且依據時間間隔更新當前數值。

資料格式

  • 單一數值:顯示每個資料系列、欄或列中的單一數值。
  • 多個數據系列:針對每個資料系列生成一個獨立的儀表,並根據不同資料系列的數值進行比較。

使用場景

  • 系統指標監控:顯示系統性能指標,如 CPU 使用率、記憶體佔用率等。
  • 目標達成進度追蹤:追蹤某項目標的達成進度,如銷售目標或資源使用率,通過視覺化展示達成的百分比或數值。
  • 單一指標狀態顯示:突出顯示單一指標的當前值,例如顯示伺服器溫度或生產線的生產率。

六、Stat

https://ithelp.ithome.com.tw/upload/images/20240919/20152073Nq0Zur4CbX.png

Stat 也是一種用來顯示單一數值的圖表,適合顯示單一數據點,例如系列中的最新值或當前值。還可以選擇性地在每個數值的背景中顯示一個小型的折線圖(sparkline),該折線圖專門用於顯示時間序列資料的趨勢。

資料格式

  • 單一數值:最常見的格式,可以是數字、字串或布林值。
  • 時間序列資料:可以對時間序列資料應用計算類型,並在指定的時間範圍內顯示單一值。

使用場景

  • 監控關鍵指標:監控關鍵指標,例如應用程式的最新健康狀況、高優先級的漏洞數量。
  • 顯示彙總資料:顯示聚合資料,例如服務的平均響應時間,以了解系統的整體效能。
  • 突出顯示超出閾值的數值:當某些指標超出預期範圍時,可以突出顯示這些數值,方便快速識別問題。

七、Pie Chart

https://ithelp.ithome.com.tw/upload/images/20240919/20152073Uk69Ps4nHM.png

圓餅圖是一種以圓形分割成多個扇形區域的圖表,每個扇形區域代表一個資料項目在總體中的佔比。圓餅圖通常用來表示不同類別在總體中的相對比例,藉由視覺化的方式,能夠直觀地比較各類別之間的大小關係。

資料格式

  • 數值資料:每個扇形切片的大小由一組數值資料決定,這些資料通常是從時間序列資料庫中聚合而來。
  • 類別型資料:每個切片對應於不同的類別,因此需要能夠在資料中區分不同的類別。
類別 數值
A 30
B 50
C 20

使用場景

  • 資源使用情況:展示不同資源(如 CPU、記憶體、磁碟空間)在總使用量中的佔比。
  • 事件分類:顯示不同類型事件的比例,如網路請求的成功與失敗次數。
  • 使用者分佈:展示不同地區或類型的使用者佔總數的比例。
  • 錯誤分析:將錯誤按類型分類,顯示出各類錯誤的相對佔比,有助於進行優化和調整。

筆者語錄
這篇文章所介紹的圖表工具算是比較基本的選項,這七種圖表雖然基本但同時也是最常使用的圖表,很多時候使用這些圖表就能夠解決大部分的問題。然而,Grafana 的強項不僅僅在於此,在下一篇文章中,我們將介紹更多進階的圖表工具,如 GeoJSON Layer、Heatmap Layer 等,讓我們的 Dashboard 更加豐富與專業。


上一篇
靠 Grafana 吃飯的第四天 - Grafana 與前端的千絲萬縷
下一篇
靠 Grafana 吃飯的第六天 - Grafana 的包羅萬象圖表工具(二)
系列文
論前端工程師如何靠 Grafana 吃飯:從 Grafana App 到前端可觀測性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言